<template>
      <div id="scoreList" >
            <el-dialog
            :title="DialogData.title"
            :visible.sync="DialogData.show"
            class="animated bounceInLeft"
            :class="{'bounceOutRight': closeDia }"
            width="60%"
            >
                  <div class="scorelist">
                        <el-table
                        :data="ListData"
                        height="500"
                        border
                        style="width: 100%">
                        <el-table-column
                              prop="addtime"
                              label="日期"
                              width="180">
                              <template slot-scope="scope">
                                    <span>{{ scope.row.addtime  }}</span>
                              </template>
                        </el-table-column>
                        <el-table-column
                              prop="name"
                              label="类型"
                              width="180">
                              <template slot-scope="scope">
                                    <span :class="{'add': scope.row.type == 1, 'unadd': scope.row.type == 2}">{{ scope.row.type == 1 ? "增加" : "减少" }}</span>
                              </template>
                        </el-table-column>
                        <el-table-column
                              prop="score"
                              label="积分">
                        </el-table-column>
                        </el-table>
                  </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="DialogData.show = false">取 消</el-button>
            <el-button type="primary" @click="DialogData.show = false">确 定</el-button>
            </span>
            </el-dialog>
      </div>
</template>

<script>
      export default {
            props: {
                  DialogData: Object,
                  ListData: Array
            },
            filters: {
                  timeFormat: function(value) {
                        return new Date(value).toLocaleDateString();
                  }
            },
            data() {
                  return {
                        closeDia: false
                  }
            },
            computed: {
                  colsed() {
                        return this.DialogData.show 
                  }
            },
            watch: {
                  colsed(newVal, oldVal) {
                        if (!newVal) {
                              this.closeDia = true
                        } else {
                              this.closeDia = false
                        }
                  }
            },
      }
</script>

<style lang="scss" scoped>
      .time {
            color: #2894ea;
      }
      .info {
            color: #c9c9c9;
            margin-left: 30px;
      }
      .add {
            color: #ff8702;
            // font-weight: bold;
      }
      .unadd {
            color:blue;
      }
      .score {
            margin-left: 20px;
      }

</style>